import React from 'react'
import styled from 'styled-components'

const HeaderWrapper = styled.div.attrs(({theme})=>{
  return theme;
})`
  display: flex;
  align-items: center;
  width: 100vw;
  height: 67px;
  overflow:hidden;
  text-align: center;
  background-color:${props=>props.headerBackgroundColor};
  flex-shrink: 0;
  &:after{
    content:"",
    display:block;
    width:100%
    height:100%;
    background:red;
    position:absolute;
    left:0;
    top:0;
  }
  
`
const HeaderLeft = styled.div`
  width: 186px;
  display: flex;
  justify-content: center;
  align-items: center;
  @media screen and (max-width: 1024px) {
    display: none;
  }
`
const HeaderCenter = styled.div`
  flex: 1;
`
const HeaderRight = styled.div`
  transition: all 1s ease;
  width: 186px;
  @media screen and (max-width: 1024px) {
    display: none;
  }
`

export default React.memo(function AppHeader({slotLeft, slotCenter, slotRight}) {
    console.info("AppHeader render")
    return (
        <HeaderWrapper className="HeaderWrapper">
            <HeaderLeft className="HeaderLeft">{slotLeft}</HeaderLeft>
            <HeaderCenter className="HeaderCenter">{slotCenter || ''}</HeaderCenter>
            <HeaderRight className="HeaderRight">{slotRight || 'slotRight'}</HeaderRight>
        </HeaderWrapper>
    )
})
